<!doctype html>
<html><!-- InstanceBegin template="/Templates/dwt.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<title>谋刻职业教育在线测评与学习平台</title>

<link rel="stylesheet" href="css/course.css"/>
<link rel="stylesheet" href="css/register-login.css"/>
<script src="js/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="css/tab.css" media="screen">
<script src="js/jquery.tabs.js"></script>
<script src="js/mine.js"></script>
</head>
<body>
<div class="head" id="fixed">
	<div class="nav">
    	<span class="navimg"><a href="index.html"><img border="0" src="images/logo.png"></a></span>
        <ul class="nag">
        	<li><a href="courselist.html" class="link1 current">课程</a></li>
            <li><a href="articlelist.html" class="link1">资讯</a></li>
            <li><a href="teacherList.html" class="link1">讲师</a></li>
            <li><a href="exam_index.html" class="link1" target="_blank">题库</a></li>
            <li><a href="askarea.html" class="link1" target="_blank">问答</a></li>
        </ul>
        <span class="massage">
        	<!--未登录-->
        	<span class="exambtn_lore">
                 <a class="tkbtn tklog" href="login.html">登录</a>
                 <a class="tkbtn tkreg" href="register.html">注册</a>
            </span>
            <!--登录后-->
        </span>
    </div>
</div>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div class="register" style="background:url(images/13.jpg) right center no-repeat #fff">
<h2>注册</h2>
<form>
    <div id="app">
        <div>
        <p class="formrow"><label class="control-label" for="register_email">手机号</label>
            <input type="text" placeholder="   请输入手机号"  v-model="user.mobile"
                   autocomplete="off" onblur="checkMobile(this)">
        </p>
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">登录名</label>
            <input type="text" placeholder="   请输入登录名称，英文或数字"  v-model="user.loginName"
                   autocomplete="off" onblur="checkLoginName(this)">
        </p>
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">密码</label>
            <input type="password" placeholder="   请输入5-20位英文和数字的密码"
                   v-model="user.loginPwd" autocomplete="off" onblur="checkLoginPwd(this)">
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">昵称</label>
            <input type="text" placeholder="   请输入昵称2-7个汉字,或4-14个字符" v-model="user.showName"
                   autocomplete="off" onblur="checkShowName(this)">
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">邮件地址</label>
        <input type="text" placeholder="   请输入正确格式的邮箱"
              v-model="user.email" autocomplete="off" onblur="checkEmail(this)">
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">选择性别</label>
        <input name="Fruit" type="radio" v-model="user.sex" value="0"/>男 </label>
        <input name="Fruit" type="radio" v-model="user.sex"  value="0"/>女 </label></p>
        </div>
        <div>
        <p class="formrow"><label class="control-label" for="register_email">年龄</label>
        <input type="text" placeholder="   请输入正确年龄"
              v-model="user.age" autocomplete="off" onblur="checkAge(this)">
        </p>
        </div>
        <div class="loginbtn reg">
            <input type="button" value="注册" @click="registerLogin()" class="uploadbtn ub1" />
        </div>
    </div>
</form>
</div>

<div class="clearh"></div>
<div class="foot">
<div class="fcontainer">
      <div class="fwxwb">
	       <div class="fwxwb_1">
		       <span>关注微信</span><img width="95" alt="" src="images/num.png">
		   </div>
           <div>
               <span>关注微博</span><img width="95" alt="" src="images/wb.png">
		   </div>
      </div>
      <div class="fmenu">
	     <p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">优秀讲师</a> | <a href="#">帮助中心</a> | <a href="#">意见反馈</a> | <a href="#">加入我们</a></p>
      </div>
      <div class="copyright">
        <div><a href="/">谋刻网</a>所有&nbsp;晋ICP备12006957号-9</div>
      </div>
    </div>
</div>
<!--右侧浮动-->
<div class="rmbar">
	<span class="barico qq" style="position:relative">
	<div  class="showqq">
	   <p>官方客服QQ:<br>335049335</p>
	</div>
	</span>
	<span class="barico em" style="position:relative">
	  <img src="images/num.png" width="75" class="showem">
	</span>
	<span class="barico wb" style="position:relative">
	  <img src="images/wb.png" width="75" class="showwb">
	</span>
	<span class="barico top" id="top">置顶</span>
</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/moment.js"></script>
<script type="text/javascript" src="js/md5.js"></script>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue，  后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">

    function checkMobile(obj) {//验证手机号
        console.log(obj);
        var re = /^1[34578]\d{9}$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入正确的手机号格式!",
                type: 'success'
            });
            obj.value = "";
        }
    }
    function checkLoginName(obj) {//验证登录名称
        console.log(obj);
        var re = /^[A-Za-z0-9]+$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入英文或数字的登录名称!",
                type: 'success'
            });
            obj.value = "";
        }
    }
    function checkLoginPwd(obj) {//验证登录密码
        console.log(obj);
        var re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入英文或数字的登录名称!",
                type: 'success'
            });
            obj.value = "";
        }
    }
    function checkShowName(obj) {//验证昵称
        console.log(obj);
        var re = /^([\u4e00-\u9fa5]{2,7})|([A-Za-z0-9 ]{4,14})$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入昵称2-7个汉字,或4-14个字符(数字,字母和“_”)",
                type: 'success'
            });
            obj.value = "";
        }
    }
    function checkEmail(obj) {//验证邮箱
        console.log(obj);
        var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入正确格式的邮箱",
                type: 'success'
            });
            obj.value = "";
        }
    }
    function checkAge(obj) {//验证年龄
        console.log(obj);
        var re = /^((1[0-5])|[1-9])?\d$/;
        console.log(obj.value);
        if (!re.test(obj.value)) {
            this.$message({
                showClose: true,
                message: "请输入正确年龄",
                type: 'success'
            });
            obj.value = "";
        }
    }


    var v=new Vue({
        el:"#app",//具体那个视图
        data:{//数据属性
            user:{
                mobile:'',
                loginName:'',
                loginPwd:'',
                showName:'',
                email:'',
                sex:'',
                age:''
            },
        },
        methods: {//函数
            registerLogin:function () {
                axios.post("/api/education-user/student/registerLogin", this.user).then((res) => {
                    if (res.data.success) {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: 'success'
                        });
                        window.location.href="login.html"
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.message,
                            type: 'error'
                        });
                    }

                });
            }
        }
    })
</script>
<!-- InstanceEnd --></html>
